<template>
  <div style="height: 765px;"><!--border: 1px solid darkblue-->

    <!--主体内容-->
    <el-row :gutter="0" style="background:white;border-bottom: 1px solid #CCC;margin: -20px;text-align: left;height: 40px;line-height: 40px">
      <el-col :span="24" :offset="0" style="">
        <el-button type="text" @click="goback"><  借款</el-button>
      </el-col>
    </el-row>




    <el-form ref="form" :model="form" label-width="80px" label-position="top">

      <el-row :gutter="0" style="background:white;margin-top: 40px;text-align: left;margin-top: 20px;margin-left: -20px;margin-right: -20px;padding: 20px">
        <el-col :span="24" :offset="0" style="">

          <el-form-item style="margin-bottom:5px">
            <el-input placeholder="500" v-model="form.loanAmount" style="">
              <template slot="prepend">￥</template>
            </el-input>
          </el-form-item>
          按天算利息，随时可还，无违约金

        </el-col>
      </el-row>


      <el-card class="box-card" style="margin-top: 10px;text-align: left">
        <div style="line-height: 20px;margin-bottom: 5px">
          借多久
        </div>
        <el-form-item>
          <el-radio-group v-model="form.loanDuration">
            <el-radio :label="5">5天</el-radio>
            <el-radio :label="10">10天</el-radio>
            <el-radio :label="30">1个月</el-radio>
            <el-radio :label="90">3个月</el-radio>
            <el-radio :label="180">6个月</el-radio>
            <el-radio :label="270">9个月</el-radio>
            <el-radio :label="360">1年</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-card>



      <el-card class="box-card" style="margin-top: 10px;text-align: left">
        <div style="line-height: 40px;border-bottom: 1px solid #CCC">
          <el-button type="text" style="color: black" @click="fun2">怎么还&nbsp;&nbsp;&nbsp;&nbsp;></el-button>
        </div>
        <div style="line-height: 40px;border-bottom: 1px solid #CCC">
          <el-button type="text" style="color: black" @click="fun2">还款计划&nbsp;&nbsp;&nbsp;&nbsp;></el-button>
        </div>
        <div style="line-height: 40px;">
          <el-button type="text" style="color: black" @click="fun2">总利息&nbsp;&nbsp;&nbsp;&nbsp;>
          {{form.loanAmount*form.loanDuration*0.0005}}
          </el-button>
        </div>
      </el-card>

      <el-card class="box-card" style="margin-top: 10px;text-align: left">
        <div style="line-height: 40px;border-bottom: 1px solid #CCC">
          <el-button type="text" style="color: black" @click="gatheringFun">收款账户&nbsp;&nbsp;&nbsp;&nbsp;>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{account}}
          </el-button>
        </div>
        <div style="line-height: 40px;">
          <div style="float: left">
          <el-button type="text" style="color: black">借款用途&nbsp;&nbsp;&nbsp;&nbsp;> </el-button>
          </div>
          <div align="center" style="line-height: 40px;text-align:center;height: 40px;width:60%;float: left;margin-left: 30px">
            <el-select v-model="form.loanPurpose" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>

          </div>
          <br>
          <br>
        </div>
      </el-card>


      <div style="line-height: 40px;background: white;margin-top: 10px;margin-left: -20px;margin-right: -20px;padding-top: 20px;padding-bottom: 20px">

        <el-form-item>
          <el-radio v-model="input"  label="8">本人已阅读并同意签署《个人消费贷款合同》，同意报送贷款<br/>相关信息金融信用信息基础数据库（个人征信系统）</el-radio>
        </el-form-item>

        <el-form-item>
          <el-button type="primary"  @click="onSubmit" style="width: 430px;height: 50px">确认</el-button>
        </el-form-item>
      </div>

    </el-form>

  </div>
</template>

<script>
  import axios from 'axios'
    export default {
      name: "borrowReal",
      data() {
        return {
          form:{},
          options: [{
            value: '零花',
            label: '零花'
          }, {
            value: '买车',
            label: '买车'
          }, {
            value: '买房',
            label: '买房'
          }, {
            value: '装修',
            label: '装修'
          }, {
            value: '买电子产品',
            label: '买电子产品'
          }],
          input:'',
          account:''
        };
      },
      methods: {
        goback:function(){
          this.$router.push("/borrow")
        },
        gatheringFun:function () {
          this.$router.push("/gathering")
        },
        onSubmit:function () {
          if(this.account==''){
            alert("请添加账户")
          }
          if(this.input==''){
            alert("请同意协议")
          }
          else{
              this.$router.push({name:"shibie",params:{loanAmount:this.form.loanAmount,loanDuration:this.form.loanDuration,loanPurpose:this.form.loanPurpose}})
          }
        },
        findUsers(){
            axios.post("http://localhost:9999/credit-borrower/findById",{id:1}).then(res=>{
                  this.account=res.data.bankcardnoLoan;
            })
        },
      },
      mounted(){
        this.findUsers();
      }
    }
</script>

<style scoped>

</style>
